<template>
  <ma-crud ref="crudRef" :columns="columns" :options="crud">
    <template #search-userName="{ searchForm, component }">
      <a-input
        :style="{ width: '240px' }"
        v-model.trim="searchForm[component.dataIndex]"
        allow-clear
        placeholder="请输入用户名称"
      >
        <template #prefix>
          <icon-search />
        </template>
      </a-input>
    </template>
  </ma-crud>
</template>

<script lang="ts" name="LoginInfo" setup>
import { list } from "@/api/monitor/loginInfo";
const crud = reactive({
  id: "infoId",
  pk: "infoId",
  title: "登录查询",
  api: list,
  showIndex: false,
  pageLayout: "normal",
  requestParams: { orderBy: "loginTime", orderType: "desc" }
});

const columns = reactive([
  {
    title: "访问编号",
    dataIndex: "infoId",
    ellipsis: true,
    tooltip: true,
    align: "center",
    hide: true
  },
  {
    title: "登录时间",
    dataIndex: "loginTime",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "用户名称",
    dataIndex: "userName",
    ellipsis: true,
    search: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录模式",
    dataIndex: "clientKey",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "status",
    ellipsis: true,
    tooltip: true,
    align: "center",
    formType: "radio",
    dict: {
      name: "sys_common_status",
      cache: true,
      props: { label: "dictLabel", value: "dictValue" },
      translation: true,
      tagColors: true
    }
  },
  {
    title: "登录IP",
    dataIndex: "ipaddr",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "登录地点",
    dataIndex: "loginLocation",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "浏览器",
    dataIndex: "browser",
    ellipsis: true,
    tooltip: true,
    align: "center"
  },
  {
    title: "终端系统",
    dataIndex: "os",
    ellipsis: true,
    tooltip: true,
    align: "center"
  }
]);
</script>
